<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="include/admin/adminHeader::html('户主信息管理')" ></head>
<body>
<div th:replace="include/admin/adminNavigator::html" ></div>
<script>
    $(function(){
        var data4Vue = {
            uri:'users',
            beans: [],
            pagination:{}
        };
        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                this.list(0);
            },
            methods: {
                list:function(start){
                    var url =  this.uri+ "?start="+start;
                    axios.get(url).then(function(response) {
                        vue.pagination = response.data;
                        vue.beans = response.data.content   ;
                    });
                },
                jump: function(page){
                    jump(page,vue); //定义在adminHeader.html 中
                },
                jumpByNumber: function(start){
                    jumpByNumber(start,vue);
                }
            }
        });
    });

</script>

<div class="page"  id="workingArea">

    <!-- 左部 -->
    <div class="page-content d-flex align-items-stretch" >


        <nav class="side-navbar">
            <!-- 头像名字部分-->
            <div class="sidebar-header d-flex align-items-center">
                <div class="avatar"><img src="img/admin/admin.jpg" alt="..." class="img-fluid rounded-circle"></div>
                <div class="title">
                    <h1 class="h4">USC</h1>
                    <p>Welcome</p>
                </div>
            </div>

            <!-- 左边菜单-->
            <span class="heading">管理</span>
            <ul class="list-unstyled">
                <li ><a href="admin_householder">户主管理 </a></li>
                <li class="active"><a href="admin_user">用户管理</a></li>
                <li><a href="#">其他管理</a></li>
            </ul>
        </nav>



        <!-- 右部部分 -->
        <div class="content-inner" >
            <!-- 管理标题-->
            <header class="page-header">
                <div class="container-fluid">
                    <h2 class="no-margin-bottom">用户信息管理</h2>
                </div>
            </header>

            <!-- 表格 -->

            <section class="tables" >
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="table-responsive" >
                                        <table class="table table-striped">
                                            <thead>
                                            <tr>
                                                <th style="width:33.3%">ID</th>
                                                <th style="width:33.3%">用户名</th>
                                                <th style="width:33.3%">密码</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="bean in beans">
                                                <td>{{bean.id}}</td>
                                                <td>{{bean.name}}</td>
                                                <td>{{bean.password}}</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <div th:replace="include/admin/adminPage::html" ></div>

            <!--页脚部分-->
            <div th:replace="include/admin/adminFooter::html" ></div>
        </div>
    </div>
</div>



</body>
</html>
